import { React, lazy } from 'react'
import { Tag } from 'antd'
import { useStore } from '../../store/index'
import { observer } from 'mobx-react-lite'
import { toJS } from 'mobx'
import { NavLink, Route, Routes, Navigate } from 'react-router-dom'
import './index.css'

const Tongji = lazy(() => import('../Tongji'))
const Jiankang = lazy(() => import('../Jiankang'))
const { CheckableTag } = Tag

function HotelList() {
  const { selectedHotelsStore, selectedTagsStore } = useStore()
  const selectedHotelList = [...toJS(selectedHotelsStore.getSelectedHotels())]
  const selectedTags = [...toJS(selectedTagsStore.getSelectedTags())]

  const handleChange = (tag, checked) => {
    if (checked) {
      selectedTagsStore.increaseSelectedTag(tag)
    }
    if (!checked) {
      selectedTagsStore.removeSelectedTag(tag)
    }
    console.log(selectedHotelList)
    console.log(selectedTags)
  }

  return (
    <div style={{ backgroundColor: 'rgba(0,0,0,.03)', margin: 0 }}>
      <div
        style={{
          paddingLeft: '10px',

          lineHeight: '40px',
          maxHeight: '400px',
          marginBottom: '9px',
          backgroundColor: '#fff',
        }}>
        <span>已选{selectedHotelList.length}家酒店:&nbsp; &nbsp; </span>
        {selectedHotelList.map((tag) => (
          <CheckableTag
            key={tag.hotelId}
            checked={
              selectedTags.findIndex(
                (value) => value.hotelName === tag.hotelName
              ) > -1
                ? true
                : false
            }
            onChange={(checked) => handleChange(tag, checked)}>
            {tag.hotelName}
          </CheckableTag>
        ))}
      </div>
      <div
        style={{
          marginTop: '10px',
          display: selectedTags.length ? 'block' : 'none',
        }}>
        <ul className="nav">
          <li>
            {' '}
            <NavLink
              to="Tongji"
              style={({ isActive }) => {
                return {
                  color: isActive ? 'red' : '',
                }
              }}>
              统计数据
            </NavLink>
          </li>
          <li>
            <NavLink
              to="Jiankang"
              style={({ isActive }) => {
                return {
                  color: isActive ? 'red' : '',
                }
              }}>
              房间数据
            </NavLink>
          </li>
        </ul>
        <div style={{ marginTop: '10px' }}>
          <Routes>
            <Route
              path="Jiankang"
              element={<Jiankang selectedTags={selectedTags} />}
            />
            <Route
              path="Tongji"
              index
              element={<Tongji selectedTags={selectedTags} />}
            />
            <Route path="/" element={<Navigate replace to="Tongji" />} />
          </Routes>
        </div>
      </div>
    </div>
  )
}

export default observer(HotelList)
